<template>
  <div  class="app-container containers background">
    <el-header id="header_title" :class="isScrollFlag == true ? 'header_title' :''">
      <el-card shadow="always" class="header">
        <el-row>
          <el-col :span="24">
            <img :src="logo" class="logo">
            <el-menu :default-active="defaultUrl"  :router="true" class="el-menu-title" mode="horizontal" background-color="#1B2B5F" text-color="#9B9B9B" active-text-color="#9B9B9B">
              <el-menu-item index="/index">首页</el-menu-item>
              <el-menu-item index="/pre/history">历史记录</el-menu-item>
              <el-dropdown class="avatar-container avatar-wrapper" trigger="click">
                <el-avatar :size="40" :src="avatar" class="user-avatar" fit="fit" shape="circle"></el-avatar>
                <el-dropdown-menu slot="dropdown" style="background-color: #1B2B5F;width: 100px">
                  <router-link to="/pre/profile">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>
                  <router-link to="/pre/pre_in_box">
                      <el-dropdown-item>系统通知</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item  @click.native="logout" >
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu>
          </el-col>
        </el-row>
      </el-card>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
    <el-footer height="75px" >
      <el-card shadow="always" style="width: 100%;height: 75px" class="footer">
        <el-row>
          <el-col :span="11" >
            <span style="font-size: 14px;color: #FFFFFF">友情链接</span>
            <el-divider direction="vertical"></el-divider>
              <el-link href="http://www.cnsoftbei.com/" style="line-height: 45px;color: #909090" type="primary">中国软件杯</el-link>
            <el-divider direction="vertical"></el-divider>
              <el-link href="https://aistudio.baidu.com/" style="line-height: 45px;color: #909090" type="primary">AI Studio</el-link>
            <el-divider direction="vertical"></el-divider>
             <el-link href="https://github.com/" style="line-height: 45px;color: #909090" type="primary">GitHub</el-link>
            <el-divider direction="vertical"></el-divider>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <img :src="logo" style="width: 102px;height: 30px;line-height: 110px">
          </el-col>
          <el-col :span="11" >
            <el-popover
              placement="top"
              trigger="hover"
              content="帮助">
              <el-button slot="reference" icon="el-icon-question"
                         circle class="footer-icon" @click="openbangzhu"></el-button>
            </el-popover>
            <el-popover
              placement="top"
              trigger="hover"
              content="留言">
              <el-button slot="reference" icon="el-icon-s-comment"
                         circle class="footer-icon"  @click="liuyanisOpen=true"></el-button>
            </el-popover>
          </el-col>
        </el-row>
      </el-card>
    </el-footer>
    <el-backtop :right="10">UP</el-backtop>
    <el-dialog
      title="帮助"
      :visible.sync="dialogVisible"
      width="50%"
      >
        <img :src="bangZhu" class="bangzhucss">
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" >关 闭</el-button>
        </span>
    </el-dialog>
    <el-dialog
      title="留言"
      :visible.sync="liuyanisOpen"
      width="50%"
    >
      <el-input
        type="textarea"
        :rows="15"
        placeholder="请输入留言内容"
        v-model="liuyanContent">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="submitLiuYan">确 定</el-button>
        <el-button @click="liuyanisOpen = false" >关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {addBack} from "@/api/system/back"
import Screenfull from "@/components/Screenfull";

export default {
  name: "main_index",
  components:{Screenfull},
  created() {
  },
  watch: {
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  data() {
    return {
      //留言内容
      liuyanContent:"",
      //留言弹窗
      liuyanisOpen:false,
      //scrollFlag
      scrollFlag:false,
      //帮助的弹出层
      dialogVisible:false,
      //检测是否在滚动滚轮
      isScrollFlag: false,
      //默认url
      defaultUrl: "/",
      //logo的url
      logo: require(`@/assets/images/pre_logo_1.png`),
      //帮助的图片
      bangZhu: require(`@/assets/images/bangzhu.png`),
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'sidebar',
      'device'
    ]),
  },
  methods: {
    submitLiuYan(){
      if(this.liuyanyanzhen(this.liuyanContent)){
        addBack({feedBackContent:this.liuyanContent}).then(r=>{
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.liuyanContent=""
        })
        this.liuyanisOpen=false
      }else {
        this.$message({
          type: 'warning',
          message: '内容不能为空'
        })
      }

    },
    liuyanyanzhen(s){
      return !(s == null || s.trim() == "");
    },
    openbangzhu(){
      this.dialogVisible=true
    },
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let offsetTop = document.querySelector('#header_title').offsetTop
      scrollTop > offsetTop ? this.isScrollFlag = true : this.isScrollFlag = false
    },
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login';
        })
      }).catch(() => {
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-container {
  margin-right: 20px;
  float: right;
}

.avatar-wrapper {
  margin-top: 10px;
  position: relative;
}

.user-avatar {
  cursor: pointer;
  line-height: 60px;
}

.el-menu-title {
  border-bottom: 0px !important;
  float: right;
  .el-menu-item {
    font-size: 15px !important;
    line-height: 62px !important;
  }

}

.carousel-img {
  display: inline-block;
  height: 100%;
  width: 86%;

}


.index-title-h3 {
  font-size: 22px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.footer-icon {
  float: right;
  color: #1B2B5F;
  opacity: 0.9;
}

.logo {
  width: 204px;
  height: 60px;
}

//页面缩放不变形状
.containers {
  overflow: scroll;
  min-width: 1515px;
  max-width: 1600px;
}

@media(min-width: 1050px) and (max-width: 1050px) {
  .header_title {
    position: fixed;
    top: 0;
    left: 21px;
    right: 21px;
    width: 97.2%;
    z-index: 999;
    align-content: center;
  }
}
.bangzhucss{
  width: 100%;
  height: auto;
}
.background{
  height: 100%;
  background-image: url("../../../assets/images/login-background.jpg");
  background-size: cover;
}
.header{
  background-color: #1B2B5F;
  border-radius: 4px;
  opacity: 0.9;
}
.footer{
  background-color: #1B2B5F;
  border-radius: 4px;
  opacity: 0.9;
}
.dialog{
  background-color: #1B2B5F;
  border-radius: 4px;
  opacity: 0.8;
}

</style>
